<template>
  <view class="tabs-wrap">
    <view :class="[ 'tab-item', curIdx === index ? 'active' : '' ]" v-for="(tab, index) of tabs" :key="index" @click="handleClick(index)">{{ tab }}</view>
  </view>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue';

defineProps({
  tabs: { type: Array, default: () => ([]) },
})

const curIdx = ref(0) as any;
const emit = defineEmits(['change']);

watchEffect(() => {
  emit('change', curIdx.value);
})

const handleClick: any = (index: any) => {
  if(curIdx.value === index) return;
  curIdx.value = index;
} 

</script>

<style lang="scss" scoped>
.tabs-wrap {
  display: flex;
  width: 622rpx;
  height: 48rpx;
  background: #ffffff;
  border: 2rpx solid #eaeaea;
  border-radius: 4rpx;
  box-sizing: border-box;

  .tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26rpx;
    border-right: 2rpx solid #eaeaea;;
    box-sizing: border-box;

    &.active {
      background: #f6f6f6;
    }

    &:last-child {
      border-right: none
    }
  }
}
</style>